<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>聚光灯字体</title>
	<style type="text/css">
		*{
			padding:0;
			margin: 0;
		}
		body{
			display:flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: #222222;
		}
		h1{
			position:relative;
/*			字体大写*/
			text-transform: uppercase;
			color: #333333;
/*			1rem=16px*/
			font-size: 8rem;
		}
		h1::after{
			content:'spotlight';
			position: absolute;
			top: 0;
			left: 0;
			color:transparent;
			background-image:linear-gradient(to right,red,#192a56,aqua,yellow,#6d214f,#2e86de,#4cd137,#e84118);
/*			背景绘制区域 值为text时表示文字的镂空效果 但前提是文字颜色为透明色*/
			background-clip: text;
			-webkit-background-clip: text;
/*			利用裁切创建元素的可显示区域 circle表示创建圆形 100px是园的直径 0%和50%表示圆心 再用关键字at隔开*/
			clip-path: circle(100px at 0% 50%);
			animation: move 5s infinite;
		}
/*		下面设置移动效果*/
		@keyframes move{
			0%{
				clip-path: circle(100px at 0% 50%);
			}
			50%{
				clip-path: circle(100px at 100% 50%);
			}
			100%{
				clip-path: circle(100px at 0% 50%);
			}
		}
	</style>
</head>

<body>
	<h1>spotlight</h1>
</body>
</html>
